<template>
  <view class="container">
    <view class="button-row">
      <view class="button-item" @click="handleCategory('餐饮')">
        <image class="logo" src="/static/food-icon.png" mode="aspectFit"></image>
        <text>餐饮</text>
      </view>
      <view class="button-item" @click="handleCategory('购物')">
        <image src="/static/shopping-icon.png" mode="aspectFit"></image>
        <text>购物</text>
      </view>
      <view class="button-item" @click="handleCategory('汽车')">
        <image src="/static/car-icon.png" mode="aspectFit"></image>
        <text>汽车</text>
      </view>
	  
      <view class="button-item" @click="handleCategory('交通')">
        <image src="/static/jiaotong-icon.png" mode="aspectFit"></image>
        <text>交通</text>
      </view>
	  <view class="button-item" @click="handleCategory('居家')">
	    <image src="/static/jujia-icon.png" mode="aspectFit"></image>
	    <text>居家</text>
	  </view>
	  <view class="button-item" @click="handleCategory('医疗')">
	    <image src="/static/yiliao-icon.png" mode="aspectFit"></image>
	    <text>医疗</text>
	  </view>
	  <view class="button-item" @click="handleCategory('孩子')">
	    <image src="/static/baby-icon.png" mode="aspectFit"></image>
	    <text>孩子</text>
	  </view>
	  <view class="button-item" @click="handleCategory('旅行')">
	    <image src="/static/lvxing-icon.png" mode="aspectFit"></image>
	    <text>旅行</text>
	  </view>
	  <view class="button-item" @click="handleCategory('通讯')">
	    <image src="/static/tongxun-icon.png" mode="aspectFit"></image>
	    <text>通讯</text>
	  </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    handleCategory(category) {
      // 这里可以添加点击按钮后的逻辑，比如跳转到对应记账页面
      console.log(`点击了${category}按钮`);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.button-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; 
  row-gap: 40rpx;

}
.button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180rpx;
}
.button-item image {
  width: 80rpx;
  height: 80rpx;
}
.button-item text {
  margin-top: 10rpx;
}
</style>